<template>
  <!--商品列表-->
  <div style="padding-bottom: 20px">
    <h1>{{mname}}</h1>
    <table v-for="good in GoodsList" @click="toGoodDetail(good)">
      <hr>
      <tr class="p"><img :src="good.gimg"></tr>
      <tr class="word">{{good.gname}}</tr>
      <tr class="num">¥ {{good.price}}</tr>
      <hr>
    </table>
  </div>
</template>

<script>
  import {selectMerchantAllGoods,findMerchantName} from '@/api/user'
  export default {
    name: 'MerchantGood',
    data () {
      return {
        GoodsList: {},
        good: {
          gid: '',
          src: '',
          gname: '',
          price: '',
        },
        mname:'', //商家名
        inputText:'',
        checkShow:true, //是否显示，默认为true
      }
    },
    methods: {
      //查询全部商品
      selectTotalGoods () {
        selectMerchantAllGoods({
          mid: this.$route.query.mid,
        }).then((res) => {
          console.log(res.data)
          this.GoodsList = res.data.data
        })
      },
      //跳转到商品详情页面，携带当前商品信息
      toGoodDetail(good){
        this.$router.replace({
          path: '/GoodDetail',
          query: {
            good:good,
          }
        })
      },
      //查询商家名
      findMerchantStoreName(){
        findMerchantName({
          mid:this.$route.query.mid,
        }).then((res)=>{
          this.mname=res.data.data //为商家名赋值
        }).catch(res=>{
          alert("出错了，请重试")
        })
      }
    },
    created () {
      //调用查询全部商品的方法
      this.selectTotalGoods();
      //查询商家名
      this.findMerchantStoreName();
    }
  }
</script>

<style scoped>
  /* 图片宽度 */
  .p img {
    width: 20rem;
  }

  /* 字体行内元素 */
  .word {
    display: inline-block;
  }

  /* 数字 */
  .num {
    color: rgb(173, 10, 10);
    display: inline-block;
    margin-top: 5px;
    line-height: 40px;
    left: 10%;
    margin-bottom: 20px;
  }
</style>
